// 笔记页面
<template>
  <div class="notes-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.title"
        placeholder="搜索笔记标题"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button type="primary" icon="el-icon-plus" @click="handleCreate">
        新增笔记
      </el-button>
    </div>

    <el-table :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column prop="_id" label="ID" width="80" align="center" />
      <el-table-column prop="title" label="标题" min-width="200" />
      <el-table-column prop="tags" label="标签" width="150" align="center">
        <template slot-scope="scope">
          <el-tag
            v-for="tag in scope.row.tags"
            :key="tag"
            style="margin-right: 5px"
          >
            {{ tag }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="更新时间"
        width="160"
        align="center"
      />
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import axios from "axios";
export default {
  name: "NotesManagement",
  components: { Pagination },
  data() {
    return {
      list: [], //全部笔记数据
      SearchForPreviousNotes: [], //搜索数据处理
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
        title: "",
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      // 获取笔记列表数据
      axios.get("http://127.0.0.1:3000/api/FetchNodes").then(
        (response) => {
          // 将api数据赋值给data
          // console.log(response.data.data);
          const data = response.data.data;
          // 遍历data里面的time替换正则
          data.forEach((item) => {
            const str = item.updateTime;
            const match = str.match(/^(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2})/);
            if (match) {
              const result = `${match[1]} ${match[2]}`;
              item.updateTime = result;
            }
          });
          // 最终将data数据赋值给list
          this.list = data;
          this.total = data.length;
          this.SearchForPreviousNotes = data;
        },
        (error) => {
          console.log(error);
        }
      );
    },
    // 搜索处理
    handleFilter() {
      this.listQuery.page = 1;
      // this.getList();
      this.list = this.SearchForPreviousNotes.filter((item) =>
        item.title.includes(this.listQuery.title)
      );
    },
    // 点击新增笔记跳转笔记编辑页面
    handleCreate() {
      this.$router.push({ name: "NoteEdit" });
    },
    // 点击编辑进入编辑页面并且把数据带进编辑页面
    handleEdit(article) {
      // article是该文章的所有数据
      this.$router.push({
        name: "NoteEdit",
        params: {
          id: article._id,
          Context: article.Context,
          title: article.title,
          name: article.name,
          tags: article.tags,
        },
        query: {
          Context: article.Context,
          title: article.title,
          name: article.name,
          tags: article.type,
        },
      });
    },
    // 删除处理
    handleDelete(article) {
      this.$confirm("确认删除该笔记吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios
            .delete(`http://127.0.0.1:3000/api/DeleNote/${article._id}`)
            .then(() => {
              this.$message.success("删除成功");
              this.getList();
            });
        })
        .catch(() => {
          this.$message.warning("删除失败");
        });
    },
  },
};
</script>

<style scoped>
.notes-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.filter-container {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.el-tag {
  margin-right: 5px;
}
</style>
